<template>
  <div class="unfinished_state">
    <span class="state_icon_color" :class="stateColor">{{data.semisStoreTypeLabel}}</span>
  </div>
</template>

<script>
export default {
  name: 'UnfinishedState',
  props: {
    data: Object
  },
  computed: {
    // 根据优先级返回相应class
    stateColor() {
      switch (this.data.semisStoreTypeValue) {
        case 'OutStored':
          // 在制品出库
          return 'unfinished_out_stored'
        case 'InStored':
          // 在制品入库
          return 'unfinished_in_stored'
        default:
          return ''
      }
    }
  }
}
</script>

<style scoped lang="less">
  /* 出入库状态颜色 */
  // 在制品出库
  @outStored: #7e8e9f;
  // 在制品入库
  @inStored: #00b4ff;

  .unfinished_state{
    .state_icon_color{
      &.unfinished_out_stored:before{
        background-color: @outStored;
      }
      &.unfinished_in_stored:before{
        background-color: @inStored;
      }
    }
  }
</style>
